<template>
    <div style="width:500px">
    	<h2>内部封装定义校验规则</h2>
    	<h4>验证方法：将at-form-item中的prop绑定相应值同时at-input绑定的表单中的字段与prop绑定的相同。例如：prop="ATIp" input中v-model="form.ATIp" 即为验证ip</h4>
    	<h4>01.验证ip ATIp  1。ip不能为空 2。符合正确的ip格式</h4>
    	<h4>02.验证年龄 ATAge  1。不能为空 2。必须为数字值 3。不能低于18岁 4。不能超过100岁</h4>
    	<h4>03.验证用户名 ATPerName  1。姓名不能为空 2.长度在2-20个字符之间</h4>
    	<h4>04.验证账号 ATUserName 1.账号不能为空 2.长度在3-16个字符 3.账号由字母、数字及下划线组成</h4>
    	<h4>05.验证邮箱 ATEmail 1.邮箱不能为空 2.符合正确的邮箱格式</h4>
    	<h4>06.验证手机号 ATPhoneNum  1.手机号不能为空  2.符合正确格式</h4>
    	<h4>07.验证身份证号 ATIdCard 1.不能为空 2.符合正确的身份证号码格式（若最后一位为x，则必须是大写的X）</h4>
        <h4>08.验证ip(分段验证) ATIdCard 1.不能为空 2.每个input里的值的范围是0-255</h4>
    	<h2>2.自定义校验规则 例如：修改密码时输入旧密码、新密码、重复新密码</h2>
    	<hr>
        <at-form ref="form" :model="form" :rules="rules2" label-width="80px">
        	<at-form-item label="ip" prop="ATIp" project="mh">
        		<at-input v-model="form.ATIp"></at-input>
        	</at-form-item>
        	<at-form-item label="年龄" prop="ATAge">
		        <at-input v-model.number="form.ATAge"></at-input>
		    </at-form-item>
		    <at-form-item label="姓名" prop="ATPerName">
		    	<at-input v-model="form.ATPerName"></at-input>
		    </at-form-item>
		    <at-form-item label="账号" prop="ATUserName">
		        <at-input v-model="form.ATUserName"></at-input>
		    </at-form-item>
		    <at-form-item label="邮箱" prop="ATEmail">
		        <at-input v-model="form.ATEmail"></at-input>
		    </at-form-item>
		    <at-form-item label="身份证" prop="ATIdCard">
		        <at-input v-model="form.ATIdCard"></at-input>
		    </at-form-item>
		    <at-form-item label="手机号码" prop="ATPhoneNum">
		        <at-input v-model.number="form.ATPhoneNum"></at-input>
		    </at-form-item>
		    <at-form-item label="旧密码" prop="oldPwd">
		        <at-input type="password" v-model="form.oldPwd"></at-input>
		    </at-form-item>
		    <at-form-item label="新密码" prop="newPwd">
		        <at-input type="password" v-model="form.newPwd"></at-input>
		    </at-form-item>
		    <at-form-item label="重复密码" prop="reNewPwd">
		        <at-input type="password" v-model="form.reNewPwd"></at-input>
		    </at-form-item>
		    <at-form-item label="角色" prop = "roleName" >
                   <at-select  v-model = "form.roleName" plceholder="标志为">
                      <at-option
                        v-for="item in roleName"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </at-option>
                    </at-select>
            </at-form-item>
		    <at-form-item label="所属单位" prop='node'>
	          <at-cascader
	          :options="form.nodeoptions"
	          v-model="form.node"
	          change-on-select
	          ></at-cascader>
	        </at-form-item>
	        <at-form-item label="ipAddress" prop="ATIpAdd">
                <ip-input v-model="form.ATIpAdd"/>
            </at-form-item>
            <at-form-item label="备注">
                <at-input v-model="form.textarea" placeholder="高度自适应，有最小高度和最大高度" type="textarea" :autosize="{ minRows: 4, maxRows: 8}"/>
            </at-form-item>
	        <at-form-item>
			    <at-button type="primary" @click="submitForm('form')">立即创建</at-button>
			    <at-button @click="resetForm('form')">重置</at-button>
			</at-form-item>
        </at-form>
    </div>
</template>

<script>
	export default{
		data(){
		    var checkRoleName= (rule, value, callback)=>{
                console.log(1111111+value)
		        if(value === '') {
		          return callback(new Error('角色为必选,请选择用户角色'));
		        }
		      };
		      var checkDepartment= (rule, value, callback)=>{
		        if(value === ''){
		          return callback(new Error('部门为必选,请选择用户所属部门'));
		        }
		      }


//验证密码 ATCheckOldPwd 1.密码不能为空 2.密码长度在6-16个字符之间
		      var checkOldPwd=(rule, value, callback)=>{
		        if(!value) {
		          return callback(new Error('旧密码为必填,请输入旧密码'));
		        }
		        setTimeout(()=>{
		          if(String(value).length>16||String(value).length<6){
		            callback(new Error('密码长度在 6 到 16 个字符'));
		          }else{
		            callback();
		          }
		        },1000)
		      };
//验证新密码 ATCheckNewPwd 1.新密码不为空 2.长度在6-16个字符之间 3.新密码与旧密码不能相同
		      var checkNewPwd=(rule, value, callback)=>{
		        if (value === '') {
		          callback(new Error('请输入密码'));
		        }
		        setTimeout(()=>{
		          if(String(value).length>16||String(value).length<6){
		            callback(new Error('密码长度在 6 到 16 个字符'));
		          }else{
		            if(value == this.form.oldPwd){
		              callback(new Error('新密码与旧密码不能相同'));
		            }else{
		              callback();
		            }
		          }
		        },1000)
		      };
//验证重复输入的新密码 ATCheckReNewPwd 1.不为空 2.长度在 6 到 16 个字符 3.不能与新密码不同
		      var checkReNewPwd=(rule, value, callback)=>{
		        if (value === '') {
		          callback(new Error('请再次输入密码'));
		        }
		        setTimeout(()=>{
		          if(String(value).length>16||String(value).length<6){
		            callback(new Error('密码长度在 6 到 16 个字符'));
		          }else{
		            if(value != this.form.newPwd){
		              callback(new Error('两次输入的密码不一致'));
		            }else{
		              callback();
		            }
		          }
		        },1000)
		      };
			return{
				form: {
		          ATCheckAge: '',
		          ATPerName:'',
		          ATUserName:'',
		          ATEmail:'',
		          ATPhoneNum:'',
		          oldPwd:'',
		          newPwd:'',
		          reNewPwd:'',
		          ATIp:'',
		          ATIdCard:'',
		          node:[],
                  roleName:'',
                  textarea:'',
                  ATIpAdd:[undefined,undefined,undefined,undefined],
		          nodeoptions:[{
                    value: 'zhinan',
                    label: '指南',
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                            value: 'yizhi',
                            label: '一致'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }, {
                            value: 'checkbox',
                            label: 'Checkbox 多选框'
                        }, {
                            value: 'input',
                            label: 'Input 输入框'
                        }, {
                            value: 'input-number',
                            label: 'InputNumber 计数器'
                        }, {
                            value: 'select',
                            label: 'Select 选择器'
                        }, {
                            value: 'cascader',
                            label: 'Cascader 级联选择器'
                        }, {
                            value: 'switch',
                            label: 'Switch 开关'
                        }, {
                            value: 'slider',
                            label: 'Slider 滑块'
                        }, {
                            value: 'time-picker',
                            label: 'TimePicker 时间选择器'
                        }, {
                            value: 'date-picker',
                            label: 'DatePicker 日期选择器'
                        }, {
                            value: 'datetime-picker',
                            label: 'DateTimePicker 日期时间选择器'
                        }, {
                            value: 'upload',
                            label: 'Upload 上传'
                        }, {
                            value: 'rate',
                            label: 'Rate 评分'
                        }, {
                            value: 'form',
                            label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }, {
                            value: 'tree',
                            label: 'Tree 树形控件'
                        }, {
                            value: 'pagination',
                            label: 'Pagination 分页'
                        }, {
                            value: 'badge',
                            label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }, {
                            value: 'loading',
                            label: 'Loading 加载'
                        }, {
                            value: 'message',
                            label: 'Message 消息提示'
                        }, {
                            value: 'message-box',
                            label: 'MessageBox 弹框'
                        }, {
                            value: 'notification',
                            label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }, {
                            value: 'breadcrumb',
                            label: 'Breadcrumb 面包屑'
                        }, {
                            value: 'dropdown',
                            label: 'Dropdown 下拉菜单'
                        }, {
                            value: 'steps',
                            label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }, {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        }, {
                            value: 'card',
                            label: 'Card 卡片'
                        }, {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        }, {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }]
		        },
		        roleName:[{
                  value: '选项1',
                  label: '已清除'
                }, {
                  value: '选项2',
                  label: '忽略'
                }, {
                  value: '选项3',
                  label: '误报'
                }],
		        rules2: {
		        //============================================================================================
		        //内部定义校验方法
		          ATAge: [
		            { trigger: 'blur', required:true }
		          ],
		          ATPerName:[
		            { trigger: 'blur', required:true}
		          ],
		          ATUserName:[
		            { trigger: 'blur', required:true}
		          ],
		          ATEmail:[
		            { trigger: 'blur', required:true}
		          ],
		          ATIp:[
		            { trigger: 'blur', required:true}
		          ],
		          ATPhoneNum:[
		            { trigger: 'blur', required:true}
		          ],
		          ATIdCard:[
		          	{ trigger: 'blur', required:true}
		          ],
                  ATIpAdd:[
                    { trigger: 'blur', required:true}
                  ],
		        //内部定义校验方法
		        //============================================================================================
		        //============================================================================================
		        //自定义校验方法
		          oldPwd:[
		            {validator: checkOldPwd, trigger:'blur', required:true}
		          ],
		          newPwd:[
		            {validator: checkNewPwd, trigger:'blur', required:true}
		          ],
		          reNewPwd:[
		            {validator: checkReNewPwd, trigger:'blur', required:true}
		          ],
		          roleName:[
		            {validator: checkRoleName, trigger: 'change', required:true}
		          ],
		          node:[
                    { type: 'array',required: true, message: '请选择所属单位', trigger: 'change' }
                  ]
		        //自定义校验方法
		        //============================================================================================
		        }
			}
		},
		methods: {
	      submitForm(formName) {
	        this.$refs[formName].validate((valid) => {
	          if (valid) {
	            alert('submit!');
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	      },
	      resetForm(formName) {
	        this.$refs[formName].resetFields();
	      }
	    }
	}
</script>
<style>
</style>
